<template>
  <el-container>
    <el-aside width="200px" v-loading="showGrouploading">
      <el-container>
        <el-header>
          <el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
        </el-header>
        <el-main class="nopadding">
          <el-tree ref="group" class="menu" node-key="id" :data="group" :props="groupProps" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false"
                   :filter-node-method="groupFilterNode" @node-click="groupClick"></el-tree>
        </el-main>
      </el-container>
    </el-aside>
    <el-container>
      <el-header>
        <div class="left-panel">
          <el-button type="primary" icon="el-icon-plus" @click="add">新建打印模板</el-button>
          <el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length == 0" @click="batch_del"></el-button>
          <el-button type="success" plain @click="printClick">打印</el-button>
        </div>
        <div class="right-panel">
          <div class="right-panel-search">
            <el-input v-model="search.keyword" placeholder="请输入关键词" clearable></el-input>
            <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
            <el-button type="info" @click="clearSearch">重置</el-button>
          </div>
        </div>
      </el-header>
      <el-main class="nopadding">
        <scTable ref="table" @cell-click="cellClick" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe remoteSort remoteFilter>
          <el-table-column type="selection" width="50" reserve-selection></el-table-column>
          <el-table-column label="模板名称" prop="name">
            <template #default="scope">
              <span style="color: #0099ff;cursor: pointer;">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="关联对象" prop="group_name">
            <template #default="scope">
              <el-tag>{{ scope.row.group_name }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="create_time"></el-table-column>
          <el-table-column label="更新时间" prop="update_time"></el-table-column>
          <el-table-column label="操作" fixed="right" align="center" width="190">
            <template #default="scope">
              <el-button-group>
                <el-popconfirm title="确定复制当前数据吗？" @confirm="table_copy(scope.row, scope.$index)">
                  <template #reference>
                    <el-button text type="warning" size="small">复制新增</el-button>
                  </template>
                </el-popconfirm>
                <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
                  <template #reference>
                    <el-button text type="danger" size="small">删除</el-button>
                  </template>
                </el-popconfirm>
              </el-button-group>
            </template>
          </el-table-column>
        </scTable>
      </el-main>
    </el-container>
  </el-container>

  <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false"></save-dialog>
</template>

<script>
import saveDialog from './save.vue'

export default {
  name: '分类管理(列表)',
  components: {
    saveDialog,
  },
  data() {
    return {
      dialog: {
        save: false,
      },
      apiObj: this.$API.print.template.list,
      selection: [],
      search: {
        keyword: null
      },
      showGrouploading: false,
      groupFilterText: '',
      group: [],
      groupProps: {
        label: (data) => {
          return data.name
        }
      },
    }
  },
  watch: {
    groupFilterText(val) {
      this.$refs.group.filter(val);
    }
  },
  mounted() {
    this.getGroup()
  },
  methods: {
    /**打印点击*/
    printClick() {
      this.$router.push({path: '/printAll/page_print'});
      //传参
      // setTimeout(() => {
      // 	this.emitter.emit('print_id',row.id);
      // },500)
    },
    /**单元格点击*/
    cellClick(row, column, cell, event) {
      if (column.property == 'name') {
        this.$router.push({path: '/printAll/print'});
        setTimeout(() => {
          this.emitter.emit('print_id', row.id);
        }, 500)
        console.log('11', row, column, cell, event)
      }
    },
    //添加
    add() {
      this.dialog.save = true
      this.$nextTick(() => {
        this.$refs.saveDialog.open('add')
      })
    },
    //编辑
    table_edit(row) {
      this.dialog.save = true
      this.$nextTick(() => {
        this.$refs.saveDialog.open('edit').setData(row)
      })
    },
    /**复制新增*/
    async table_copy(row) {
      var reqData = {id: row.id}
      var res = await this.$API.print.template.copy.post(reqData);
      if (res.code == 1) {
        this.$refs.table.refresh()
        this.$message.success("复制成功")
      } else {
        this.$alert(res.message, "提示", {type: 'error'})
      }
    },
    //删除
    async table_del(row, index) {
      var reqData = {id: row.id}
      var res = await this.$API.print.template.delete.post(reqData);
      if (res.code == 1) {
        //这里选择刷新整个表格 OR 插入/编辑现有表格数据
        this.$refs.table.tableData.splice(index, 1);
        this.$message.success("删除成功")
      } else {
        this.$alert(res.message, "提示", {type: 'error'})
      }
    },
    async table_del_all(delete_ids) {
      var reqData = {id: delete_ids}
      var res = await this.$API.print.template.delete.post(reqData);
      if (res.code == 1) {
        this.$refs.table.refresh()
        this.$message.success("删除成功")
      } else {
        this.$alert(res.message, "提示", {type: 'error'})
      }
    },
    //批量删除
    async batch_del() {
      var delete_ids = [];
      this.selection.forEach((item) => {
        delete_ids.push(item.id)
      })
      this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
        type: 'warning'
      }).then(() => {
        this.table_del_all(delete_ids)
      }).catch(() => {

      })
    }
    ,
    //表格选择后回调事件
    selectionChange(selection) {
      this.selection = selection;
    }
    ,
    //搜索
    upsearch() {
      this.$refs.table.upData(this.search)
    }
    ,
    /**清空搜索*/
    clearSearch() {
      Object.keys(this.search).forEach(key => {
        this.search[key] = null;
      });
      this.upsearch()
    }
    ,
    //本地更新数据
    handleSuccess(data, mode) {
      if (mode == 'add') {
        this.$refs.table.refresh()
      } else if (mode == 'edit') {
        this.$refs.table.refresh()
      }
    },
    //加载树数据
    async getGroup() {
      this.showGrouploading = true;
      var res = await this.$API.print.object.all.get();
      this.showGrouploading = false;
      var allNode = {id: '', name: '所有'}
      res.data.unshift(allNode);
      this.group = res.data;
    },
    //树过滤
    groupFilterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // groupClick(node) {
    // 	var params = {
    // 		group_id: node.id
    // 	}
    // 	this.$refs.table.reload(params)
    // },
    groupClick(node) {
      console.log('node :>> ', node);
      var childIds = [];

      function getChildIds(node) {
        if (node.children && node.children.length > 0) {
          node.children.forEach(child => {
            childIds.push(child.id);
            getChildIds(child);
          });
        }
      }

      getChildIds(node);
      console.log('childIds :>> ', childIds);
      // 如果要将这些id作为参数传递给其他地方，如下面的代码示例
      var params = {
        group_id: node.id
      }
      // 假设这里的this.$refs.table.reload接受一个包含group_id和child_ids的参数对象
      params.child_ids = childIds;
      this.$refs.table.reload(params)
    }

  }
}
</script>

<style>

</style>
